/*
 * @param {String} dom - 引用信息 ref，标识宫格元素
 * @param {String} width - 宫格宽度，仅支持 rpx 或 px
 * @param {String} height - 宫格高度，仅支持 rpx 或 px
 * @param {Array} prizes - 奖品项，设置奖品名、奖品图片
 * @param {Number} surplus - 剩余抽奖次数
 * @param {Object} faimsg - 无抽奖次数时，禁止抽奖提示框
 * @param {Object} btnimg - 抽奖按钮的配置，仅可配置抽奖按钮上的图片与剩余次数角标的图片
 * @param {Array} blocks - 设置宫格底盘外层、中层、内层背景颜色，不支持图片
 * @param {Object} defaultConfig - 设置格子之间的间距
 * @param {Object} defaultStyle - 设置奖品格子的字体、字号、颜色，也可配置格子块背景颜色、圆角、阴影、对齐方式
 * @param {Object} activeStyle - 设置抽奖中格子跳动时的样式，仅可设置纯色背景或渐变色，不支持图片
 * @param {Number} timer - 抽奖时宫格跑动的时间(不算停滞时间)，单位 ms
 * @param {Number} index - 中奖索引，即奖品项 prizes 数组下标，可根据接口返回或自定义决定奖品
 */



/*
 * @start - 开启宫格跳动（抽奖中），默认处理宫格的开启与停止，可加入其他动作
 * @end - 停止宫格跳动（抽奖完成），获得结果，可加入其他动作
 * @prohibit - 禁止抽奖，默认弹出提示框，可加入其他动作
 */

<template>
	<view>
		<sudoku
		:ref="dom"
		:width="width"
		:height="height"
		:prizes="prizesx"
		:buttons="buttons"
		:blocks="blocks"
		:default-config="defaultConfig"
		:default-style="defaultStyle"
		:active-style="activeStyle"
		@start="startCallBack"
		@end="endCallBack"
		/>
	</view>
</template>


<script>
import sudoku from '../../libs/prize/sudoku/sudoku.vue'
export default {
	
	name: 'u-sudoku',
	components: { sudoku },
	data() {
		return {
			
			// 剩余抽奖次数
			luckyNum: 0,
			
			// 奖品
			prizesx: [],
		}
	},
	
	
	props: {
		
		dom: {//引用信息 ref，标识转盘元素
			type: String,
			default: ''
		},
		
		width: {//宫格宽度，仅支持 rpx 或 px
			type: String,
			default: '600rpx'
		},
		
		height: {//宫格高度，仅支持 rpx 或 px
			type: String,
			default: '600rpx'
		},
		
		prizes: {//奖品项，设置奖品名、奖品图片
			type: Array
		},
		
		surplus: {//剩余抽奖次数
			type: Number,
			default: 0
		},
		
		faimsg: {//无抽奖次数时，禁止抽奖提示框
			type: Object
		},
		
		timer: {//抽奖时宫格跑动的时间(不算停滞时间)，单位 ms
			type: Number,
			default: 1000
		},
		
		btnimg: {//抽奖按钮的配置，仅可配置抽奖按钮上的图片与剩余次数角标的图片
			type: Object
		},
		
		blocks: {//设置宫格底盘外层、中层、内层背景颜色，不支持图片
			type: Array
		},
		
		defaultConfig: {//设置格子之间的间距
			type: Object
		},
		
		defaultStyle: {//设置奖品格子的字体、字号、颜色，也可配置格子块背景颜色、设置奖品格子的字体、字号、颜色，也可配置格子块背景颜色、圆角、阴影、对齐方式阴影、对齐方式
			type: Object
		},
		
		activeStyle: {//设置抽奖中格子跳动时的样式，仅可设置纯色背景或渐变色，不支持图片
			type: Object
		},
		
		index: {//中奖索引，即奖品项 prizes 数组下标，可根据接口返回或自定义决定奖品
			type: Number,
			default: 0
		}
		
	},
	
	computed: {
		
		// 抽奖状态宫格变化处理
	    buttons () {
	      return [{
	        x: 1,
	        y: 1,
	        background: 'linear-gradient(270deg, #FFDCB8, #FDC689)',
	        shadow: '0 5 1 #e89b4f',
	        fonts: [
	          { text: `${this.luckyNum} 次`, fontColor: '#fff', top: '73%', fontSize: '11px' },
	        ],
	        imgs: [
	          { src: this.btnimg.button, width: '65%', top: '13%' },
	          { src: this.btnimg.marker, width: '50%', top: '73%' }
	        ]
	      }]
	    }
		
	  },
	  
	  
	  mounted () {
		  
		  // 初始化宫格抽奖
	      this.getPrizeList()
		  
		  // 设置抽奖次数
		  this.luckyNum = this.surplus
	  },

	
	methods: {
		
		
		/*
		 * 初始化转盘
		 * @return void
		 */
		getPrizeList: function()
		{
			const prizes = []
			let axis = [[0, 0], [1, 0], [2, 0], [2, 1], [2, 2], [1, 2], [0, 2], [0, 1]]

			for (let i = 0; i < 8; i++) {
			  let item = this.prizes[i]
			  prizes.push({
				index: i, x: axis[i][0], y: axis[i][1],
				fonts: [{ text: item.name, top: '70%' }],
				imgs: [{ src: item.img, width: '55%', top: '8%' }]
			  })
			}
			this.prizesx = prizes
		},
			
			
		
		/*
		 * 启动转盘
		 * @return void
		 */
		startCallBack: function()
		{
		  // 可抽奖
		  if(this.luckyNum >= 1){
			  // 启动转盘
			  this.$refs[this.dom].play()
			  setTimeout(() => {
					this.$refs[this.dom].stop(this.index)
			  }, this.timer)
			  
			  // 暴露
			  this.$emit('start')
		  }
		  
		  // 禁止抽奖(无抽奖次数)
		  if (this.luckyNum < 1){
			uni.showModal(this.faimsg)
			this.$emit('prohibit')
		  }
		  
		},
			
		
		
		/*
		 * 结束抽奖
		 * 抽奖结果
		 * @return void
		 */
		endCallBack: function(prize)
		{
			// 剩余抽奖次数-1
			this.luckyNum -= 1
			this.$emit('end', prize)
		}

	}
	
}
</script>

<style lang="scss">

</style>